<template>
  <div class="mygame" ref="mygameWrapper">
    <gamelist :load-url="loadUrl" :type="type" :no-flip="noFlip"></gamelist>
    <nomore v-if="noMoreGame"></nomore>
    <loadingfull></loadingfull>
    <back></back>
  </div>
</template>

<script type="text/ecmascript-6">
  import gamelist from '../../common/gamelist/gamelist'
  import nomore from '../../common/nomore/nomore'
  import BScroll from 'better-scroll'
  import loadingfull from '../../common/loading-full/loading-full'
  import back from '../../common/back/back'

  export default {
    data() {
      return {
        loadUrl: '/game/index.php?m=Home&c=Api&a=getRecentlyGameLists',
        type: 'start',
        noFlip: true,
        noMore: false,
        noMoreGame: false
      }
    },
    created() {
      this.$nextTick(() => {
        if (!this.giftScroll) {
          this.giftScroll = new BScroll(this.$refs.mygameWrapper, {
            click: true
          })
        } else {
          this.giftScroll.refresh()
        }
      })
    },
    mounted() {
      this.eventBus.$on('noMoreGame', (status) => {
        this.noMoreGame = status
        this.Indicator.close()
      })
    },
    components: {
      loadingfull,
      gamelist,
      nomore,
      back
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../assets/stylus/mixin.styl"
  .mygame
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    background #fff
    z-index 10
    overflow hidden
</style>
